<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
<body>
  <canvas id="demo1" width="650" height="400"></canvas>
</body>
</html>
<script>
  window.onload = () => {
    /**
      * Test Class 文本类 -- demo
      */
    let stage1 = new createjs.Stage("demo1");

    let text1 = new createjs.Text("Text 1 !", "bold 26px Arial", "#ff7700");
    text1.regX = 50;     // 沿X轴负方向的偏移量
    text1.regY = 50;     // 沿Y轴负方向的偏移量
    text1.x = 50;        // 绘制源点 X坐标
    text1.y = 50;         // 绘制源点 Y坐标

    let text2 = new createjs.Text("旋转+XY拉伸！", "bold 18px Arial", "#ff7700");
    text2.x = 50;
    text2.y = 50;
    text2.rotation = 0;      // 旋转角度 DEG
    text2.scaleX = 2;         // X轴放大(拉伸)
    text2.scaleY = 2;         // X轴放大(拉伸)

    let text3 = new createjs.Text("XY轴倾斜", "bold 50px Arial", "#ff7700");
    text3.x = 300;
    text3.y = 200;
    text3.skewX = 0;         // X轴倾斜角度 DEG
    text3.skewY =45;         // Y周倾斜角度 DEG

    let text4 = new createjs.Text("文字shadow", "bold 30px Arial", "#ff7700");
    text4.x = 400;
    text4.y = 100;
    text4.shadow = new createjs.Shadow("#000000", 20, 20, 25);      // 创建一个shadow实例Object

    stage1.addChild(text1, text2, text3, text4);
    console.log(
      'stage', stage1
    )
    
    stage1.update();    // 更新舞台，每次修改操作后需要更新真个舞台才有效果
  }
</script>

